<style scoped>
/* eslint-disable */
.alert_bottom {
  margin-bottom: 20px;
}

.titleclass {
  font-size: 13px;
  font-weight: bold;
  color: #2b3645;
}
.shortdesc {
  text-align: justify;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.typeclass {
  color: #5390f0;
}
.statusingClass {
  color: #5390f0;
}
.statusendClass {
  color: green;
}

.recordshortcontent {
  text-align: justify;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* min-height: 40px; */
  margin: 0px 0px;
}
.taketimeclass {
  width: 30%;
  float: right;
  font-size: 10px;
  margin-top: 10px;
  text-align: right;
  color: #5390f0;
}
.timelinedivclass {
  max-height: 600px;
  min-height: 400px;
  width: 100%;
  overflow: scroll;
}

.image {
  width: 100%;
  height: 150px;
}
/* eslint-disable */
</style>
<template>
  <div>
    <el-row style="margin-top: 20px" type="flex" justify="center">
      <el-col :span="23">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="120px"
          :inline="true"
        >
          <el-form-item label="教室名称" prop="code">
            <el-input v-model="searchForm.code"></el-input>
          </el-form-item>
          <!-- <el-form-item label="教室状态" prop="phone">
            <el-input v-model="searchForm.phone"></el-input>
          </el-form-item> -->

          <!-- <el-form-item label="空闲教室时间段">
              <div class="block">
                <el-date-picker
                  :disabled="btnBoolean"
                  style="width: 400px"
                  v-model="leaveValue"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-form-item> -->

          <el-button size="small" type="primary" @click="init">搜索</el-button>
          <el-button size="small" @click="resetSearch('searchForm')"
            >重置</el-button
          >
        </el-form>
      </el-col>
    </el-row>

    <!-- <el-row type="flex" justify="center" style="margin-bottom: 10px">
      <el-col :span="23">
        <el-button
          size="small"
          icon="el-icon-plus"
          type="primary"
          @click="addPlanInfo"
          >添加计划</el-button
        >
        <el-button
          size="small"
          icon="el-icon-minus"
          type="danger"
          @click="deleteUsers"
          >批量删除</el-button
        >
      </el-col>
    </el-row> -->

    <el-row type="flex" justify="center">
      <el-col :span="23">
        <el-alert
          title
          type="success"
          :closable="false"
          show-icon
          class="alert_bottom"
        >
          已选择
          <span>{{ 0 }}</span> 项
          <a @click="clearSelectAll" style="color: red">清空</a>
        </el-alert>

        <el-col
          :span="4"
          v-for="(o, index) in tableData"
          :key="o.id"
          :offset="index % 5 != 0 ? 1 : 0"
          style="margin-top: 30px; height: 300px"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            @click.native="cardclick(o)"
            shadow="hover"
          >
            <img :src="o.classRoomImage" class="image" />
            <div style="padding: 14px">
              <p>教室名称：{{ o.code }}</p>
              <p>
                当前状态：<span
                  :style="{ color: o.status == '空闲中' ? 'green' : 'red' }"
                  >{{ o.status }}</span
                >
              </p>
            </div>
          </el-card>
        </el-col>

        <!-- <el-table
          size="small"
          ref="multipleTable"
          :border="false"
          :data="tableData"
          tooltip-effect="dark"
          style="width:100%"
          height="700"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="id" label="ID" width="60"></el-table-column>
          <el-table-column prop="planImage" label="计划封面" width="250" align="center">
            <template slot-scope="scope">
              <img style="width:200px;height:90px" :src="scope.row.planImage" />
            </template>
          </el-table-column>
          <el-table-column prop="planName" label="计划标题" width="200" align="center">
            <template slot-scope="scope">
              <p class="titleclass">{{scope.row.planName}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="planDesc" width="250" label="计划短描述" align="center">
            <template slot-scope="scope">
              <p class="shortdesc">{{scope.row.planDesc}}</p>
            </template>
          </el-table-column>

          <el-table-column prop="progress" label="计划进度" align="center">
            <template slot-scope="scope">
              <el-progress :width="70" type="circle" :percentage="Number(scope.row.progress)"></el-progress>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="计划状态" align="center">
            <template slot-scope="scope">
              <p class="statusingClass" v-if="scope.row.status === '进行中'">{{scope.row.status}}</p>
              <p class="statusendClass" v-if="scope.row.status === '结束'">{{scope.row.status}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="执行天数" align="center"></el-table-column>

       
          <el-table-column prop="startTime" label="开始日期" align="center"></el-table-column>
          <el-table-column prop="endTime" label="结束日期" align="center"></el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button @click="records(scope.row)" type="primary" size="mini">记录</el-button>
              <el-button @click="editPlanInfo(scope.row)" type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table> -->
      </el-col>
    </el-row>

    <el-row type="flex" justify="end" style="margin-top: 30px">
      <el-col :span="8">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNumber"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      top="6vh"
      title="选择教室信息"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="新增选室记录" name="first">
          <el-row type="flex" justify="center" style="margin-top: 50px">
            <el-col :span="23">
              <el-form ref="form" :model="recordform" label-width="100px">
                <el-form-item label="教室名称">
                  <el-input
                    v-model="recordform.code"
                    style="width: 400px"
                    disabled
                  ></el-input>
                </el-form-item>

                <el-form-item label="上课老师">
                  <el-input
                    v-model="recordform.teacherName"
                    style="width: 400px"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="上课时间">
                  <el-date-picker
                    v-model="studyTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="主要内容">
                  <el-input
                    type="textarea"
                    v-model="recordform.content"
                    style="width: 400px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row type="flex" justify="end" style="margin-top: 20px">
            <el-col :span="7">
              <el-button size="small" @click="closeDialog">取消</el-button>
              <el-button size="small" @click="submitRecord" type="primary"
                >提交</el-button
              >
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="历史使用记录" name="second">
          <el-row type="flex" justify="center">
            <el-col :span="22">
              <el-table :data="historyData" height="500">
                <el-table-column prop="code" label="教室名称">
                </el-table-column>
                <el-table-column prop="teacherName" label="老师姓名">
                </el-table-column>
                <el-table-column prop="useStartTime" label="开始时间">
                </el-table-column>
                <el-table-column prop="useEndTime" label="结束时间">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>

          <el-row type="flex" justify="end" style="margin-top: 30px">
            <el-col :span="10">
              <el-pagination
                @size-change="handleSizeHistoryChange"
                @current-change="handleCurrentHistoryChange"
                :current-page="searchHistoryForm.pageNumber"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchHistoryForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="historyTotal"
              ></el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  findClassRoomByCondition,
  findClassRoomHistoryByCondition,
  submitClassRoomUseInfo,
} from "@/api/classroom/classroom-api";
import { mapGetters } from "vuex";

import MarkdownEditor from "@/components/Markdown/markdown-editor";

export default {
  /* eslint-disable */
  name: "planlist",
  computed: {
    ...mapGetters(["name", "avatar", "roles", "id"]),
  },
  components: {
    MarkdownEditor,
  },
  data() {
    return {
      activeName: "first",
      studyTime: [],
      currentDate: new Date(),
      recordList: [],
      historyData: [],

      dateRange: "",
      statusList: [
        {
          value: "未开始",
          label: "未开始",
        },
        {
          value: "进行中",
          label: "进行中",
        },
        {
          value: "已结束",
          label: "已结束",
        },
        {
          value: "放弃",
          label: "放弃",
        },
      ],
      //edit / add
      titleText: "新增",
      dialogVisible: false,

      journalHtmlContent: "",
      journalTitle: "",
      executeRecordId: "",
      executeRecordItem: {},

      // page
      total: 0,
      historyTotal: 0,
      searchHistoryForm: {
        pageNumber: 0,
        pageSize: 10,
      },
      searchForm: {
        code: "",
        pageNumber: 0,
        pageSize: 10,
      },
      //executepage
      executeForm: {
        pageNumber: 0,
        pageSize: 10,
        planId: "",
      },
      form: {
        planImage: "",
      },

      recordform: {},
      tableData: [],

      //markdown

      value: "",
      html: "",

      blogInfo: {
        blogMdContent: "",
        blogContent: "",
        blogImageUrl: "",
      },
      blogTypeList: [
        {
          id: "",
          typeName: "",
        },
      ],

    
    };
  },

  methods: {
    hisotryQuery() {
      findClassRoomHistoryByCondition(this.searchHistoryForm).then(
        (response) => {
          if (response.msg === "success") {
            this.historyTotal = response.data.totalElements;
            this.historyData = response.data.content;
          }
        }
      );
    },
    handleClick(tab, event) {
      this.searchHistoryForm.id = this.recordform.id;
      if (tab.index == 1) {
        this.hisotryQuery();
      }
    },
    /**
     * 点击card
     */
    cardclick(o) {
      this.recordform = o;
      this.studyTime = [];
      this.recordform.teacherUserId = this.id;
      this.recordform.teacherName = this.name;

      this.dialogVisible = true;
    },

    clearSelectAll() {},
    handleSelectionChange() {},

    init() {
      findClassRoomByCondition(this.searchForm).then((response) => {
        if (response.msg === "success") {
          this.total = response.data.totalElements;
          this.tableData = response.data.content;
        }
      });
    },

    //重置
    resetSearch(formName) {
      this.$refs[formName].resetFields();
      this.init();
    },

    handleSizeHistoryChange(pageSize) {
      this.searchHistoryForm.pageSize = pageSize;
      this.hisotryQuery();
    },
    //page
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handleCurrentHistoryChange(pageNumber) {
      this.searchHistoryForm.pageNumber = pageNumber;
      this.hisotryQuery();
    },
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber;
      this.init();
    },

    closeDialog() {
      this.dialogVisible = false;
    },

    submitRecord() {
      this.recordform.useStartTime = this.studyTime[0];
      this.recordform.useEndTime = this.studyTime[1];
      this.recordform.teacherName = this.name;
      submitClassRoomUseInfo(this.recordform).then((response) => {
        if (response.msg === "success") {
          this.$message({ message: "提交成功", type: "success" });
          this.closeDialog();
          this.init();
        }
      });
    },

    submit() {
      console.log(this.dateRange);
      this.form.startTime = this.dateRange[0];
      this.form.endTime = this.dateRange[1];

      submitPlanInfo(this.form).then((response) => {
        if (response.msg === "success") {
          this.$message({ message: "提交成功", type: "success" });
          this.closeDialog();
          this.init();
        }
      });
    },
  },

  created() {
    this.init();
  },
};
</script>

